<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>悲欢相通</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
  <script src="/js/pace.min.js"></script>
  <meta name="generator" content="Hexo 5.2.0">
</head>

<body>
  <main class="content">
    <section class="jumbotron">
      <div class="video">
        <div class="video-frame">
          <img src="/images/ocean/overlay-hero.png" alt="Decorative image frame">
        </div>
        <div class="video-media">
          <img src="/images/girl.jpg">
          <div class="video-overlay"></div>
        </div>
        <div class="video-inner text-center text-white">
          <h1><a href="/">悲欢相通</a></h1>
          <p style="
          font-size: 1.5em;
          font-weight: 700;
      ">人类的悲欢并不相通,我只觉得他们吵闹.——《小杂感》</p>
          <div><img src="/images/logo-white.png" class="brand" alt="悲欢相通"></div>
        </div>
        <div class="video-learn-more">
          <a class="anchor" href="#landingpage"><i class="fe fe-mouse"></i></a>
        </div>
      </div>
    </section>
    <div id="landingpage">
      <section class="outer">
        <article class="articles">
          <h1 class="page-type-title"></h1>
          <article id="post-前端性能优化方法" class="article article-type-post" itemscope itemprop="blogPost"
            data-scroll-reveal>
            <div class="article-inner">
              <header class="article-header">
                <h2 itemprop="name">
                  <a class="article-title"
                    href="/2020/10/22/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%B3%95/">前端性能优化方法</a>
                </h2>
              </header>
              <div class="article-meta">
                <a href="/2020/10/22/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%B3%95/"
                  class="article-date">
                  <time datetime="2020-10-22T13:37:32.000Z" itemprop="datePublished">2020-10-22</time>
                </a>
              </div>
              <div class="article-entry" itemprop="articleBody">
                <h2 id="加载时优化"><a href="#加载时优化" class="headerlink" title="加载时优化"></a>加载时优化</h2>
                <h3 id="1-减少-HTTP-请求"><a href="#1-减少-HTTP-请求" class="headerlink" title="1. 减少 HTTP 请求"></a>1. 减少 HTTP 请求
                </h3>
                <font size=4>
                  一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。
                </font>

                <p><img
                    src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC82LzI1LzE3MmU5ODY3YzFiZDY0Nzk?x-oss-process=image/format,png"
                    alt="img"></p>
                <h3 id="2-使用服务端渲染"><a href="#2-使用服务端渲染" class="headerlink" title="2. 使用服务端渲染"></a>2. 使用服务端渲染</h3>
                <font size=4>
                  客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
                  服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。
                </font>
                <ul>
                  <li>优点：首屏渲染快，SEO 好。</li>
                  <li>缺点：配置麻烦，增加了服务器的计算压力。</li>
                </ul>
                <h3 id="3-静态资源使用-CDN"><a href="#3-静态资源使用-CDN" class="headerlink" title="3. 静态资源使用 CDN"></a>3. 静态资源使用 CDN
                </h3>
                <font size=4>
                  内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
                </font>
                <p><img
                    src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC83LzUvMTczMWYwMDE1NWQ4NzAzNw?x-oss-process=image/format,png"
                    alt="img"></p>
                <h3 id="4-将-CSS-放在文件头部，JavaScript-文件放在底部"><a href="#4-将-CSS-放在文件头部，JavaScript-文件放在底部" class="headerlink"
                    title="4. 将 CSS 放在文件头部，JavaScript 文件放在底部"></a>4. 将 CSS 放在文件头部，JavaScript 文件放在底部</h3>
                <font size=4>
                  所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就空白了。所以 JS 文件要放在底部，等 HTML 解析完了再加载 JS
                  文件。
                </font>
                <h3 id="5-使用字体图标-iconfont-代替图片图标"><a href="#5-使用字体图标-iconfont-代替图片图标" class="headerlink"
                    title="5. 使用字体图标 iconfont 代替图片图标"></a>5. 使用字体图标 iconfont 代替图片图标</h3>
                <font size=4>
                  字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。
                </font>

                <h3 id="6-压缩文件"><a href="#6-压缩文件" class="headerlink" title="6. 压缩文件"></a>6. 压缩文件</h3>
                <font size=4>
                  压缩文件可以减少文件下载时间，让用户体验性更好。
                  得益于 webpack 和 node 的发展，现在压缩文件已经非常方便了。
                  在 webpack 可以使用如下插件进行压缩：
                </font>
                <ul>
                  <li>JavaScript：UglifyPlugin</li>
                  <li>CSS ：MiniCssExtractPlugin</li>
                  <li>HTML：HtmlWebpackPlugin</li>
                </ul>
                <h3 id="7-图片优化"><a href="#7-图片优化" class="headerlink" title="7. 图片优化"></a>7. 图片优化</h3>
                <font size=4>
                  在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用图片延迟加载。
                </font>
                <h3 id="8-通过-webpack-按需加载代码，减少-ES6-转为-ES5-的冗余代码"><a href="#8-通过-webpack-按需加载代码，减少-ES6-转为-ES5-的冗余代码"
                    class="headerlink" title="8. 通过 webpack 按需加载代码，减少 ES6 转为 ES5 的冗余代码"></a>8. 通过 webpack 按需加载代码，减少 ES6
                  转为 ES5 的冗余代码</h3>
                <h2 id="运行时优化"><a href="#运行时优化" class="headerlink" title="运行时优化"></a>运行时优化</h2>
                <h3 id="9-减少重绘重排"><a href="#9-减少重绘重排" class="headerlink" title="9. 减少重绘重排"></a>9. 减少重绘重排</h3>
                <h4 id="浏览器渲染过程"><a href="#浏览器渲染过程" class="headerlink" title="浏览器渲染过程"></a>浏览器渲染过程</h4>
                <p>
                  <font size=4>1. 解析HTML生成DOM树。</font>
                </p>
                <p>
                  <font size=4>2. 解析CSS生成CSSOM规则树。</font>
                </p>
                <p>
                  <font size=4>3. 将DOM树与CSSOM规则树合并在一起生成渲染树。</font>
                </p>
                <p>
                  <font size=4>4. 遍历渲染树开始布局，计算每个节点的位置大小信息。</font>
                </p>
                <p>
                  <font size=4>5. 将渲染树每个节点绘制到屏幕。</font>
                </p>
                <p><img
                    src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC82LzI1LzE3MmVhMDM0Y2U1MzRkZmE?x-oss-process=image/format,png"
                    alt="img"></p>
                <h3 id="10-不要覆盖原生方法"><a href="#10-不要覆盖原生方法" class="headerlink" title="10. 不要覆盖原生方法"></a>10. 不要覆盖原生方法
                </h3>
                <font size=4>
                  无论你的 JavaScript 代码如何优化，都比不上原生方法。因为原生方法是用低级语言写的（C/C++），并且被编译成机器码，成为浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和 DOM
                  操作。
                </font>
                <h3 id="11-if-else-对比-switch"><a href="#11-if-else-对比-switch" class="headerlink"
                    title="11. if-else 对比 switch"></a>11. if-else 对比 switch</h3>
                <font size=4>
                  当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。
                </font>
                <h3 id="12-使用-flexbox-而不是较早的布局模型"><a href="#12-使用-flexbox-而不是较早的布局模型" class="headerlink"
                    title="12. 使用 flexbox 而不是较早的布局模型"></a>12. 使用 flexbox 而不是较早的布局模型</h3>
                <font size=4>
                  在早期的 CSS 布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了新的布局方式，它比起早期的布局方式来说有个优势，那就是性能比较好。
                </font>
                <p><a target="_blank" rel="noopener"
                    href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a>
                </p>
              </div>
              <footer class="article-footer">
                <a data-url="http://ht12345.gitee.io/2020/10/22/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%B3%95/"
                  data-id="ckgkugrlb0001fww80rfsco98" class="article-share-link">
                  分享
                </a>
              </footer>
            </div>
          </article>
        </article>
      </section>
    </div>
    <footer class="footer">
      <div class="outer">
        <div class="float-right">
          <ul class="list-inline">
            <li><i class="fe fe-bar-chart"></i> <span id="busuanzi_value_site_pv"></span></li>
            <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
          </ul>
        </div>
        <ul class="list-inline">
          <li>&copy; 2020 悲欢相通</li>
          <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
          <li>Theme <a target="_blank" rel="noopener" href="https://github.com/zhwangart/hexo-theme-ocean">Ocean</a>
          </li>
        </ul>
      </div>
    </footer>

  </main>
  <aside class="sidebar">
    <button class="navbar-toggle"></button>
    <nav class="navbar">
      <div class="logo">
        <a href="/"><img src="/images/logo.png" alt="悲欢相通"></a>
      </div>
      <ul class="nav nav-main">
        <li class="nav-item">
          <a class="nav-item-link" href="/">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-item-link" href="/archives">时间轴</a>
        </li>
        <li class="nav-item">
          <a class="nav-item-link" href="/gallery">相册</a>
        </li>
        <li class="nav-item">
          <a class="nav-item-link" href="/about">关于</a>
        </li>
        <li class="nav-item">
          <a class="nav-item-link nav-item-search" title="Search">
            <i class="fe fe-search"></i>
            搜索
          </a>
        </li>
      </ul>
    </nav>
    <nav class="navbar navbar-bottom">
      <ul class="nav">
        <li class="nav-item">
          <div class="totop" id="totop">
            <i class="fe fe-rocket"></i>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
            <i class="fe fe-feed"></i>
          </a>
        </li>
      </ul>
    </nav>
    <div class="search-form-wrap">
      <div class="local-search local-search-plugin">
        <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
        <div id="local-search-result" class="local-search-result"></div>
      </div>
    </div>
  </aside>
  <canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;"></canvas>
  <script src="/js/jquery-2.0.3.min.js"></script>
  <script src="/js/jquery.justifiedGallery.min.js"></script>
  <script src="/js/lazyload.min.js"></script>
  <script src="/js/busuanzi-2.3.pure.min.js"></script>
  <script src="/fancybox/jquery.fancybox.min.js"></script>
  <script src="/js/ocean.js"></script>
  <script src="/js/loves.js"></script>
  <script src="/js/anime.js"></script>
  <script src="/js/fireworks.js"></script>
</body>

</html>